<template>
  <view class="content">
    <view class="title">
      嗨词店铺管理
    </view>
    <view class="welcome">
      欢迎登录进行使用！
    </view>
    <view class="form">
      <view class="ipt">
        <u-input class="uni-input" placeholder="请输入您的账号" placeholder-class="ipt-text" v-model="info.username" />
      </view>
      <view class="ipt flex" style="margin-top: 35rpx;" v-if="iptType == 'password'">
        <u-input class="uni-input" :type="iptType" placeholder="请输入您的密码" placeholder-class="ipt-text"
          v-model="info.password" />
        <image class="img" src="../../static/img/eye.png" mode="" @tap="reveal()"></image>
      </view>
      <view class="ipt flex" style="margin-top: 35rpx;" v-else>
        <input class="uni-input" type="text" placeholder="请输入您的密码" placeholder-class="ipt-text" v-model="info.password">
        <image class="img" src="../../static/img/eye.png" mode="" @tap="reveal()"></image>
      </view>

    </view>

    <view class="btn" @tap="login">
      登录
    </view>
    <view class="remind" @tap="mandatory = !mandatory">
      <view class="grey" v-if="!this.mandatory">
        <u-icon name="checkbox-mark" color="rgba(243, 245, 246, 1)"></u-icon>
      </view>
      <view class="circular" v-if="this.mandatory">
        <u-icon name="checkbox-mark" color="#fff" size="19px"></u-icon>
      </view>
      <view class="text">
        我已阅读并同意 <span class="blue" @tap="navTo(2)">服务协议</span> 和 <span class="blue" @tap="navTo(1)">隐私政策</span>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        iptType: 'password',
        mandatory: false,
        info: {
          username: '',
          password: ''
        },
      };
    },
    onLoad() {

    },
    methods: {
      reveal() {
        if (this.iptType == 'password') {
          this.iptType = 'text'
        } else {
          this.iptType = 'password'
        }
        console.log(this.iptType);
      },
      async login() {
        if (!this.mandatory) {
          return this.toast.msg('请阅读并同意相关政策!')
        }
        const {
          data: res
        } = await uni.$http.post('school/login/login', this.info)
        if (res.code == 1) {
          uni.setStorageSync('app_token', res.data.token);

          this.toast.msg('登录成功')

          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/home"
            })
          }, 1000)
        } else {
          this.toast.msg(res.msg)
        }
      },
      navTo(type) {
        uni.navigateTo({
          url: `/pages/login/agreement?type=${type}`
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    box-sizing: border-box;
    padding-top: 290rpx;

    .title {
      width: 426rpx;
      margin: 0 auto 38rpx;
      font-size: 64rpx;
      font-weight: 400;
      color: rgba(31, 35, 41, 1);
    }

    .welcome {
      width: 444rpx;
      margin: 0 auto;
      font-size: 42rpx;
      color: rgba(100, 106, 115, 1);
    }

    .form {
      width: 766rpx;
      margin-left: 60rpx;

      .ipt {
        box-sizing: border-box;
        background: rgba(243, 245, 246, 1);
        border-radius: 26rpx;
        width: 643rpx;
        height: 114rpx;
        border: 2rpx solid rgba(208, 211, 213, 1);
        padding-left: 40rpx;
        margin-top: 93rpx;

        /deep/.u-input {
          width: 100%;
          height: 100%;
          border: none;
        }

        .pwdIpt {
          width: 80% !important;
        }

        .ipt-text {
          font-size: 28rpx;
          color: rgba(143, 149, 158, 1);
        }

        .img {
          margin-left: auto;
          width: 44rpx;
          height: 44rpx;
          z-index: 999;
          margin-right: 20rpx;
        }
      }
    }

    .btn {
      margin-left: 60rpx;
      margin-top: 163rpx;
      box-sizing: border-box;
      width: 671rpx;
      height: 114rpx;
      text-align: center;
      line-height: 114rpx;
      border-radius: 26rpx;
      background-color: rgba(187, 191, 196, 1);
      font-size: 52rpx;
      color: rgba(243, 245, 246, 1);
    }

    .remind {
      margin-left: 60rpx;
      margin-top: 37rpx;
      font-size: 28rpx;
      color: rgba(143, 149, 158, 1);
      height: 52rpx;
      line-height: 52rpx !important;

      .circular {
        width: 52rpx;
        height: 52rpx;
        line-height: 52rpx !important;
        border-radius: 26rpx;
        background-color: rgba(20, 86, 240, 1);
        color: #fff;
        text-align: center;
      }

      .grey {
        box-sizing: border-box;
        width: 52rpx;
        height: 52rpx;
        line-height: 52rpx !important;
        border-radius: 26rpx;
        border: 1rpx solid rgba(143, 149, 158, 1);
        background-color: rgba(243, 245, 246, 1);
        text-align: center;
      }

      view {
        display: inline-block;
      }

      .text {
        margin-left: 12rpx;
      }

      .blue {
        color: rgba(20, 86, 240, 1);
        margin: 0 5rpx;
      }
    }
  }
</style>